<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<canvas id="MyCanvas" width="1350" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("MyCanvas");
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = "lightgray";
			ctx.fillRect(0, 0, 1350, 600);
			var arcX1 = 50;
			var arcY1 = 50;
			var arcR1 = 50;
			var l1 = 5;
			var t1 = 6;
			
			var arcX2 = 50;
			var arcY2 = 50;
			var arcR2 = 50;
			var l2 = 8;
			var t2 = 10;

			var arcX3 = 50;
			var arcY3 = 50;
			var arcR3 = 50;
			var l3 = 10;
			var t3 = 12;

			
			
			setInterval(function(){
			   ctx.fillStyle = "rgba(175,100,140,0.2)";
			   ctx.fillRect(0, 0, 1350, 600);
			   ctx.beginPath();
			   ctx.fillStyle = "#FFFF00";
			   ctx.arc(arcX1, arcY1, arcR1 , 0, 2*Math.PI);
			   ctx.fill();
			   arcX1 = arcX1 + l1;
			   arcY1 = arcY1 + t1;
			   
			   if(arcY1 > 600 - arcR1 || arcY1 < arcR1){
			   	t1 = -t1;
			   }
			   if(arcX1 > 1350 - arcR1 || arcX1 < arcR1){
			   	l1 = -l1;
			   }
			   
			   
			   ctx.beginPath();
			   ctx.fillStyle = "palegreen";
			   ctx.arc(arcX2, arcY2, arcR2 , 0, 2*Math.PI);
			   ctx.fill();
			   arcX2 = arcX2 + l2;
			   arcY2 = arcY2 + t2;
			   
			   if(arcY2 > 600 - arcR2 || arcY2 < arcR2){
			   	t2 = -t2;
			   }
			   if(arcX2 > 1350 - arcR2 || arcX2 < arcR2){
			   	l2 = -l2;
			   }		

			   
			   ctx.beginPath();
			   ctx.fillStyle = "deepskyblue";
			   ctx.arc(arcX3, arcY3, arcR3 , 0, 2*Math.PI);
			   ctx.fill();
			   arcX3 = arcX3 + l3;
			   arcY3 = arcY3 + t3;
			   
			   if(arcY3 > 600 - arcR3 || arcY3 < arcR3){
			   	t3 = -t3;
			   }
			   if(arcX3 > 1350 - arcR3 || arcX3 < arcR3){
			   	l3 = -l3;
			   }	
			   
			},16);
		
		</script>
	</body>
</html>
